<template>
  <div>
    <el-card class="box-card">
      <el-form ref="ruleFormRef" label-position="top" :model="addAdministratorFrom" status-icon :rules="rules"
        label-width="120px" class="demo-ruleForm">

        <el-form-item prop="username" label="输入昵称">
          <el-input v-model="addAdministratorFrom.username" placeholder="请输入用户名" :prefix-icon="UserFilled" />
        </el-form-item>

        <el-form-item label="输入密码" prop="password">
          <el-input v-model="addAdministratorFrom.password" type="password" placeholder="请输入密码" autocomplete="off"
            :prefix-icon="Lock" />
        </el-form-item>

        <el-form-item label="确认密码" prop="checkPassword">
          <el-input v-model="addAdministratorFrom.checkPassword" type="password" placeholder="请确认密码" autocomplete="off"
            :prefix-icon="Lock" />
        </el-form-item>

        <el-form-item label="上传头像 ">
          <upload-avatar ref="uploadAvatarData">
          </upload-avatar>
        </el-form-item>

        <el-form-item>
          <div class="submitBtn">
            <el-button @click="submitForm(ruleFormRef)">确认</el-button>
            <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>


  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, defineEmits } from 'vue'
import { Lock, UserFilled } from '@element-plus/icons-vue'

import type { FormInstance } from 'element-plus'

import UploadAvatar from '@/components/upload/UploadAvatar.vue'


import { ElMessage } from 'element-plus'
import { addAdministrtator } from '@/utils/adminHttp'
const uploadAvatarData: any = ref(null)
const ruleFormRef = ref<FormInstance>()
const addAdministratorFrom = reactive({
  username: '',
  password: '',
  checkPassword: ''
})

const emits = defineEmits(['changeAdminPage'])

// 密码验证 
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    const reg = /^[\w+$]{6,12}$/
    if (reg.test(value)) {
      callback()
    } else {
      callback(new Error('密码只能是6-12位的数字下划线和字母'))
    }
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请确认密码'))
  } else if (value !== addAdministratorFrom.password) {
    callback(new Error("两次密码不一致!"))
  } else {
    callback()
  }
}
// 用户名验证
const validateUsername = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入用户名'))
  } else {
    const reg = /^.{2,8}$/
    reg.test(addAdministratorFrom.username) ? callback() : callback(new Error('用户名长度是2-8位'))
  }
}
const rules = reactive({
  username: [{ validator: validateUsername, trigger: 'blur' }],
  password: [{ validator: validatePass, trigger: 'blur' }],
  checkPassword: [{ validator: validatePass2, trigger: 'blur' }],
})

// 清空表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  uploadAvatarData.value.handleRemove()
}
// 提交
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      addAdministrtator(uploadAvatarData.value.fileList[0] && uploadAvatarData.value.fileList[0].raw, addAdministratorFrom.username, addAdministratorFrom.password).then(res => {
        if (res.data.ok) {
          addAdministratorFrom.username = ''
          addAdministratorFrom.password = ''
          addAdministratorFrom.checkPassword = ''
          uploadAvatarData.value.handleRemove()
          emits('changeAdminPage')
          ElMessage({
            message: res.data.info,
            type: 'success',
          })
        } else {
          ElMessage.error(res.data.info)
        }

      }).catch(err => ElMessage.error('服务器错误 请检查您的token'))

    } else {
      return false
    }
  })
}



</script>

<style lang="scss"  scoped>
.demo-ruleForm {
  max-width: 400px;
  margin: auto;
}

.el-form-item {
  margin-top: 20px;
}
</style>